<template>
  <div class="list scroll"  :style="{ height: height + 'px' }">
    <comloading v-if="watchflag"></comloading>
    <!-- 展示数据 -->
    

    
    <div v-if="!watchflag" >
      <div >
      <div
        class="item"
        v-for="(item, index) in data"
        :key="index"
        @click="godetail(item.filmId)"
        
      >
        <div class="left">
          <img v-lazy="item.poster" />
        </div>
        <div class="middle">
          <div>{{ item.name }}</div>
          <div v-if="type == 1">
            <span>观众评分 </span>
            <span class="grade">{{ item.grade }}</span>
          </div>
          <div>主演：{{ item.actors | parseActors }}</div>
          <div>{{ item.nation }} | {{ item.runtime }}分钟</div>
        </div>
        <div class="right">
          <span v-if="type == 1">购票</span>
          <span v-else>预购</span>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
// loading导入
import comloading from "@/components/comloading.vue";
import BScroll from "better-scroll";
// 导入请求方法
import { nowplayingListData, comingSoonListData } from "@/api/api";

export default {
  data() {
    return {
      loading: true,
      watchflag: true,
      height: 0,
      // bs：保存better-scroll的实例结果
      bs: null,
      pageNum: 1,
      flag: true, // 控制是否可以继续加载更多
      data: [], // 拼数据的
    };
  },
  props: ["list1", "type"],
  components: {
    comloading,
  },
  created() {
    //不好的用法
    // 当进入页面后需要将父传子的数据list转交给data
    //this.data = this.list1;
    // 判断数据是否获取到，获取到之后去除loading组件
    // if (this.data.length > 0) {
    //     this.loading = false;
    // } else {
    //     this.loading = true;
    // }
  },
  filters: {
    // 处理演员的数据，将主演的数据从数组形式转化成字符串形式以便输出
    parseActors: function(value) {
      let actors = "";
      if (value) {
        value.forEach((element) => {
          actors += element.name + " ";
        });
      } else {
        actors = "暂无主演";
      }
      return actors;
    },
  },
  watch: {
    list1: function(newval) {
      console.log("进来watch了");
      this.watchflag = false;
      this.data = this.list1;
      //   console.log(newVal);
    },
    //  immediate: true,
  },
  methods: {
    godetail(filmId) {
      console.log("哈哈哈哈哈我进来了godetail里面了  filmId");
      console.log(filmId);
      this.$router.push({ name: "detail", params: { filmId } });
    },
    // 获取数据的方法
    async getData() {
      console.log("进来getdata第一层了");
      if (this.flag) {
          this.flag = false
        console.log("getData进来了 flag");
        this.pageNum++;
        console.log(this.pageNum);
        //获取数据
        if (this.type == 1) {
          //这是正在上映的电影数据请求
          console.log("进来this.type =1里面了");
          console.log(this.pageNum);
          var ret = await nowplayingListData(this.pageNum);
          console.log("ret这是上映的电影新数据请求", ret);
        } else {
          var ret = await comingSoonListData(this.pageNum);
        }
        this.flag =true
        if (ret.data.data.films.length < 1) {
            this.flag = false
        }
        
        this.data = this.data.concat(ret.data.data.films);//拼接数据
      }
    },
  },
  mounted() {
    // 获取可见高度
    this.height = document.documentElement.clientHeight-100;
    console.log(this.height);
  },
  updated() {
    //new 得到better scroll的全部能力
    //如果没有 this.bs没有 new BScroll给的全部的能力 就执行一次 如果有  为了防止容器刷新 不在新new了
    if (!this.bs) {
      this.bs = new BScroll(".scroll", {
        pullUpLoad: true,
        // 激活下滑的事件监听
        pullDownRefresh: true,
        // 它会禁止一些浏览器的事件
        click: true,
        pullUpLoad: {
          threshold: 20,
        },
      });
    } else {
      //如果已经有了 new BScroll给的全部能力 我就不继续 new 新的了 以防止重新渲染容器
      //this.bs.refresh()意思是  正常运转 已有的容器
      this.bs.refresh();
    }

    this.bs.on("pullingUp", () => {
      // 获取数据
      this.getData();
        
      this.bs.finishPullUp();
    });
    //本次pullup动作已经完成，继续准备下一次pullup
    this.bs.on("pullingDown", () => {
      // 获取数据

      this.getData();
      //本次pulldown动作已经完成，继续准备下一次pulldown
      this.bs.finishPullDown();
    });
  },
};
</script>

<style lang="scss" scoped>
.list {
  margin-bottom: 50px;
  background: #fff;

  .item {
    margin-top: 15px;
    padding-bottom: 15px;
    display: flex;
    color: #797d82;
    font-size: 13px;
    border-bottom: 1px solid #ededed;

    .left {
      width: 77px;
      height: 100px;
      margin-left: 20px;
      img {
        width: 66px;
        height: 100%;
      }
    }

    .middle {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 55%;

      div:nth-of-type(1) {
        color: #191a1b;
        font-size: 16px;
      }

      div:nth-of-type(3) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .grade {
        color: #ffb232;
        font-size: 14px;
      }
    }

    .right {
      width: 15%;
      display: flex;
      align-items: center;
      margin-right: 20px;

      span {
        border: 1px solid #ff5f16;
        background: white;
        color: #ff5f16;
        border-radius: 2px;
        height: 25px;
        line-height: 25px;
        font-size: 13px;
        width: 50px;
        text-align: center;
      }
    }
  }
}

.scroll {
  overflow: hidden;
  
}
</style>
